<script setup lang="ts">
import router from '../../router'

const clickLeft = () => {
  if (history.state?.back) {
    // history 是浏览器原生的 历史对象
    history.back()
  } else {
    // route 是vue-router路由的方法
    router.push('/')
  }
}

const clickRight = () => {
  console.log('父组件监听的事件')
}
</script>

<template>
  <div class="login-page">
    <cp-nav-bar title="登录332" rightText="注册6" @click-left="clickLeft" @click-right="clickRight"></cp-nav-bar>
    <div class="login-page-main">
      <div class="lp-title">密码登录</div>
      <div class="lp-form">登录表单</div>
      <div class="lp-forget">忘记密码</div>
      <div class="lp-icon">图标</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-page {
  // width: calc(100% - 30px);
  width: 100%;
  height: 100vh;
  // 盒子模型 border-box -- 更margin没关系
  // border-box： width = 内容的宽度 + 左右的padding + 左右的border。 如果有poadding和 border，那么widht的内容宽度，会自动减少一些，包装前面写的width:100%
  // content-box: width = 内容的宽度  padding border如果写了，会在给width增加一些宽度
  // padding: 0 15px;
  box-sizing: border-box;
  background-color: aqua;
  .login-page-main {
    padding: 0 15px;
    .lp-title {
      margin-top: 50px;
    }
  }
}
</style>
